<template>
  <div class="matlab-bar dis-flex">
    <div class="block">
      <div class="top dis-flex variable">
        <div class="column">
          <div class="icon-style" />
          <div class="varscontainer" @click="openChooseVariable">{{ selectedVars }}<br>&nbsp;</div>
        </div>
      </div>
      <div class="desc">所选内容</div>
      <div class="right-line" />
    </div>

    <div class="block chart flex-max">
      <div v-show="!drawList.length" class="paint-mask">
        <div class="text">请选择变量</div>
      </div>
      <div class="top dis-flex paint-bg flex-max">
        <div class="paint-img-bg dis-flex flex-max">
          <!-- 没有可用绘图时展示在后面的绘图 -->
          <div v-show="!drawList.length" class="paint-img-temp">
            <div class="paint-img">
              <img src="@/assets/images/plottype-plot.png" alt="">
              <p class="paint-text">plot</p>
            </div>
            <div class="paint-img">
              <img src="@/assets/images/plottype-bar.png" alt="">
              <p class="paint-text">bar</p>
            </div>
            <div class="paint-img">
              <img src="@/assets/images/plottype-scatter.png" alt="">
              <p class="paint-text">scatter</p>
            </div>
            <div class="paint-img">
              <img src="@/assets/images/plottype-pie.png" alt="">
              <p class="paint-text">pie</p>
            </div>
          </div>

          <div v-for="item in drawList" :key="item.type" class="paint-img" @click="draw(item)">
            <img :src="item.picture" alt="">
            <p class="paint-text">{{ item.shortname }}</p>
          </div>
          <!--
          <div class="paint-img" @click="goCurvefit()" v-show="drawList.length">
            <img src="@/assets/images/curvefit.png" alt="" />
            <p class="paint-text">Curve Fitting Toolbox</p>
          </div>
            -->
        </div>
        <i class="el-icon-caret-bottom" @click="openPaintBarMenu" />
      </div>
      <div class="desc">绘图</div>
      <div class="right-line" />
      <paint-bar-menu
        id="paintBarMenu"
        ref="paintBarMenu"
        class="paintbar-menu-position"
      />

    </div>

    <div class="block window">
      <div class="top dis-flex">
        <el-radio-group
          v-model="radio"
          style="height: 70px; padding: 20px 0 0 10px"
          @change="changeRadio"
        >
          <el-radio class="mb-10" :label="1">重用窗口</el-radio><br>
          <el-radio :label="2">新建窗口</el-radio>
        </el-radio-group>
      </div>
      <div class="desc">选项</div>
      <div class="right-line" />
    </div>
  </div>
</template>

<script>
import { plot, getDrawList } from '@/utils/plot.js';
import PaintBarMenu from '../dropdown-menu/PaintBarMenu.vue';
export default {
  components: {
    PaintBarMenu
  },
  data() {
    return {
      fig_json: {},
      radio: 1,
      showPaintDetail: true
    };
  },
  computed: {
    selectedVars: function() {
      let selectedName = '';
      const selectedVars = this.$store.state.matlab.selectedVars;
      if (selectedVars.length === 0) { return '未选择变量'; }
      selectedVars.forEach((variable, index) => {
        if (index !== 0) { selectedName += ','; }
        selectedName += variable.Name;
      });
      return selectedName;
    },
    drawList: function() {
      const list = getDrawList(this.$store, '');
      let drawList = [];
      for (let i = 0; i < list.length; i++) {
        if (list[i].useable) {
          var temp = list[i].list.filter((item) => item.useable === true);
          drawList = drawList.concat(temp);
        }
      }// 获得一维的绘图列表，并删除当前选择变量下不可用的项
      return drawList;
    }
  },
  methods: {
    openChooseVariable() {
      this.$store.commit('matlab/showChooseVariable', { isShow: true });
    },
    // openWindow(href) {
    //   var width = 1000;
    //   var height = 800;
    //   var y = window.screen.availHeight;
    //   var x = window.screen.availWidth;
    //   window.open(
    //     href,
    //     'name',
    //     'height=' +
    //       height +
    //       ', width=' +
    //       width +
    //       ', top=' +
    //       (y * 1) / 5 +
    //       ', left=' +
    //       (x * 3) / 5 +
    //       ', toolbar=no, menubar=no, scrollbars=no, resizable=yes,location=no, status=no'
    //   );
    // },
    // openWindow1(type) {
    //   plot(this.$store, type);
    //   var xhr = new XMLHttpRequest();
    //   xhr.open(
    //     'POST',
    //     'https://service-3ambrvmx-1304355182.bj.apigw.tencentcs.com/release/plotlyApp6',
    //     true
    //   );
    //   //将用户输入值序列化成字符串

    //   var fig = {
    //     data: [
    //       {
    //         x: ["giraffes", "orangutans", "monkeys"],
    //         y: [20, 14, 23],
    //         type: "bar",
    //       },
    //     ],
    //   };

    //   xhr.send(JSON.stringify(fig_json));
    //   xhr.onreadystatechange = function() {
    //     if (xhr.readyState === 4) {
    //       if (xhr.status === 200) {
    //         this.htmltxt = xhr.responseText;
    //         const myWindow = window.open('', '', 'width=800,height=600,left=300,top=100');
    //         myWindow.document.write(xhr.responseText); // info为html的字符串
    //       }
    //     }
    //   };
    // },
    goCurvefit() {
      this.$router.push('Curvefit');
    },
    changeRadio() {
      this.$store.commit('matlab/setImgReuseWindow', { isReuse: this.radio === 1 });
    },
    draw(item) {
      plot(this.$store, item.type);
    },
    openPaintBarMenu() {
      setTimeout(() => {
        this.$refs.paintBarMenu.show();
        document.body.addEventListener('mousedown', this.menuClose);
      }, 100);
    },
    // 点击其他位置关闭菜单
    menuClose(e) {
      var sp = document.getElementById('paintBarMenu');
      if (!sp) {
        document.body.removeEventListener('mousedown', this.menuClose);
      } else {
        if (!sp.contains(e.target)) {
          try {
            this.$refs.paintBarMenu.hide();
            document.body.removeEventListener('mousedown', this.menuClose);
          } catch (e) {
            document.body.removeEventListener('mousedown', this.menuClose);
          }
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-radio__label {
  font-size: 12px;
}
// .variable{
//   border: 1px solid #bdbdbd;
// }
.paint-mask{
  background: rgb(190,190,190,0.5);
  //border-left: 1px solid #bdbdbd;
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  overflow:hidden;
  z-index: 100;
  display: flex;
  .text{
    font-size: 17px;;
    text-align: center;
    padding-bottom: 15px;
    margin: auto;
    color:#242424;
    font-weight: 500;
  }
}
.paint-bg {
  border: 1px solid #bdbdbd;
  border-radius: 3px;
  background: #e6e6e6;
  margin: 2px;

  i {
    line-height: 60px;
    width: 20px;
    text-align: center;
  }
  .paint-img-bg {
    background: #f0f0f0;
    border-right: 1px solid #bdbdbd;
    position: relative;
    width:0;//flex1 overflow
    overflow:hidden;
    .paint-img-temp{
      display: flex;
    }

    .paint-img {
      text-align: center;

      img {
        height: 40px;
        margin: 5px 10px 0;
      }

      p {
        padding: 0;
        margin: 0;
        white-space: nowrap
      }
    }

    .paint-img:hover{
      background-color:rgb(230,230,230);
    }
    .paint-img:active{
      background-color:rgb(220,220,220);
    }
  }
}
.varscontainer{
  width:80px;
}

.paintbar-menu-position{
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  top:0;
  left:0;
  padding: 4px;
}
</style>
